<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
</head>
<body>
  <script>
    /* 
    Promise是用来封装异步的ES6新语法, 可以用于解决回调地狱问题。 
    */
   /*  const p = new Promise((resolve, reject) => {  // 执行器
      // 执行异步操作
      setTimeout(() => {
        //如果成功了, 调用resolve传入成功的value
        resolve('成功的value')  // 将promise变为成功的状态, 并将传入的数据保存为成功的数据
        // 如果失败了, 调用reject传入失败的reason
        reject('失败的reason') // 将promise变为失败的状态, 并将传入的数据保存为失败的数据
      }, 1000);
      
    })
    console.log(p) */

    /* 
    then方法的返回值
      返回一个新的promise, 它的结果状态由 then指定的回调函数执行的结果 决定
        抛出错误  => 失败, reason是抛出的错误
        返回一个失败的promise  => 失败, reason是返回的promise的reaon
        返回一个成功的promise  => 成功, value是返回的promise的value
        返回其它任意值 => 成功, value是返回值
    catch方法 本质是then方法的语法糖
      调用then(value => value, onRejected), 传入一个默认成功回调, 返回value
      它会传递成功的promise
    finally方法  接受一个回调，不管成功/失败都会触发
    */

   /*  p.then(value => { // 成功时执行
      console.log('onResolved', value)
      // 可以在此回调中执行新的同步或异步任务

      // 抛出错误  => 失败, reason是抛出的错误
      // throw 2
      // 返回一个失败的promise  => 失败, reason是返回的promise的reaon
      // return Promise.reject(3)
      // 返回一个成功的promise  => 成功, value是返回的promise的value
      // return Promise.resolve(4)
      // 返回其它任意值 => 成功, value是返回值
      // return 5
      // return undefined
    }, reason => {})
    .then(value => {
      console.log('onResolved2', value)
    })
    .catch(reason => { // 失败时执行
      console.log('onRejectd', reason)
    })
    .finally(() => { // 无论成功/失败, 都会执行
      console.log('onFinally')
    }) */

    /* 
    5. Promise的静态方法
      ● Promise.resolve(value) 返回一个成功的 promise 对象 
      ● Promise.reject(reason) 返回一个失败的 promise 对象
      ● Promise.all([promise1, promise2, ...]) 只有所有 promise 成功才成功，只要有一个 promise 失败就会失败
      ● Promise.allSettled([promise1, promise2, ...]) 只要所有 promise 状态发生变化就成功，结果值包含所有 promise 的结果值（不管成功/失败）
      ● Promise.race([promise1, promise2, ...]) 只要有一个 promise 成功/失败，就成功/失败。
    */

    /* const p1 = Promise.reject(3)
    const p2 = Promise.resolve(4)
    const p3 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(5)
      }, 1000);
    })
    
    const p4 = Promise.all([p3, p1, p2])
    console.log(p4)
    const p5 = Promise.allSettled([p3, p1, p2])
    console.log(p5)
    const p6 = Promise.race([p3, p1, p2])
    console.log(p6) */

    async function fn() {
      // axios.get('./08_product.json')
      //   .then(response => {
      //   })
      //   .catch(error => {
      //   })
      try {
        const response = await axios.get('./08_product2.json')
        return response.data
      } catch (error) {
        console.log(error)
        throw error
      }
    }

    function test() {
      // async函数执行返回的promise的结果状态由 函数体执行的结果 决定
      const p = fn()
      p.then(
        value => {
          console.log(value, 1)
        },
        reason => {
          console.log(reason, 2)
        }
      )
    }
    test()
  </script>
</body>
</html>